<!-- <template>
  <div>

  </div>
 
  <div>
    <video style="width: 20px;height: 20px;" ref="videoPlayer" id="videoPlayer" ></video>
  </div>
</template>
 
<script setup lang="ts">
import videojs from "video.js"
import "video.js/dist/video-js.css"
 
import { ref, onMounted } from "vue"
 
 
//播放器的配置选项
const playerOptions = {
  autoplay: false,
  muted: true,
  loop: false,
  innerWidth:'10px',
  innerHeight:'10px',
  sources: [
    {
      type: "application/x-mpegURL",
      src: "https://live.cgtn.com/1000/prog_index.m3u8"
      // src: "https://39.134.115.163:8080/PLTV/88888910/224/3221225640/index.m3u8"
    }
  ],
  controlBar: {
    timeDivider: true,
    fullscreenToggle: true
  }
}
const one = ref("afdshgbkr")
const list=ref([])
onMounted(() => {
  //拿到dom
  const playDom: any = document.getElementById("videoPlayer")
  // 用插件拿到实例对象
  const player: any = videojs(playDom, playerOptions)
  //播放
  player.play()
})
</script>
 
<style lang="scss" scoped>
.some {
  // border-style: $BORDER;
  // background: $BG;
  color: red;
}
#videoPlayer{
  width: 10px;
  height: 10px;
  border: 1px solid black;
  
}
</style> -->


<!-- <template>
  <div>
    <div>
      <vue3VideoPlay 
      width="800px"
      title="冰河世纪"
      :src="options.src"
      :type="options.type"
      :autoPlay="false"
       />
       23ho32hrbdfbglfdnl
  </div>
  </div>
</template>
<script setup lang='ts'>
import { reactive } from 'vue';
import {vue3VideoPlay} from 'vue3-video-play'
const options = reactive({
  src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", //视频源
  type: 'm3u8', //视频类型
})
</script>
<style scoped>
</style> -->
<template>
  <h5 style="text-align: center;">体育赛事列表</h5>
  <div class="allbox">
    <div class="box" v-for="(item, index) in list" :key="index" @click="zb(item)">
    <img src="./img/15.png" alt="">
    <span style="font-size: 16px;word-wrap: break-word;">独家冠名播出{{ item }}</span>
    </div>
  </div>
  <img src="./img/22.png" alt="" class="zb_img">
</template>
<script setup lang='ts'>
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
import { reactive } from 'vue';
const list = reactive(
  [
    'https://live.cgtn.com/1000/prog_index.m3u8',
    'https://t2.tvmak.com/tv/ALBSWISS.m3u8',
    'https://t2.tvmak.com/tv/ALBFILMTV1.m3u8',
    'https://t2.tvmak.com/tv/ALBFILMTV2.m3u8',
    "https://livear.cgtn.com/1000a/prog_index.m3u8 "
  ]
)
const zb=(item)=>{
  router.push({path:'/home/match2',query:{item:item}})
}
</script>
<style scoped>
.allbox{
  width: 100%;
  height: 100vh;
  overflow-x: scroll;
  display: flex;
  scroll-snap-type: x mandatory;
  .box {
    width: 100px;
    flex: 0 0 50%;
  scroll-snap-align: start;
   img{
    width: 100%;
   }
}
}
.zb_img{
  position: absolute;
  top: 240px;
  width: 100%;
  /* background-color: red; */
}

</style>